<script setup>
import { ref } from 'vue'

// 当前播放
const currentTrack = ref({
  title: '稻香',
  artist: '周杰伦',
  album: '魔杰座',
  cover: '/images/covers/default.jpg',
  duration: '03:31',
  currentTime: '01:45',
  progress: 45
})

// 播放列表
const playlist = ref([
  {
    id: 1,
    title: '稻香',
    artist: '周杰伦',
    album: '魔杰座',
    duration: '03:31'
  },
  {
    id: 2,
    title: '晴天',
    artist: '周杰伦',
    album: '叶惠美',
    duration: '04:29'
  },
  {
    id: 3,
    title: '七里香',
    artist: '周杰伦',
    album: '七里香',
    duration: '04:59'
  }
])

// 播放控制
const isPlaying = ref(true)
const volume = ref(80)
const isShuffle = ref(false)
const isRepeat = ref(false)

// 音效设置
const equalizer = ref({
  bass: 50,
  mid: 50,
  treble: 50
})

// 氛围灯光
const ambientLight = ref({
  enabled: true,
  color: '#FF6B6B',
  mode: 'pulse' // static, pulse, rainbow
})

// 切换播放状态
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
}

// 调整音量
const updateVolume = (value) => {
  volume.value = value
}

// 切换音效
const updateEqualizer = (type, value) => {
  equalizer.value[type] = value
}

// 切换灯光模式
const toggleLight = () => {
  ambientLight.value.enabled = !ambientLight.value.enabled
}

// 更新灯光颜色
const updateLightColor = (color) => {
  ambientLight.value.color = color
}
</script>

<template>
  <div class="room-page">
    <!-- 主播放器 -->
    <div class="player-section">
      <div class="album-art">
        <img 
          :src="currentTrack.cover"
          :alt="currentTrack.title"
          class="cover-image"
        >
        <div 
          class="ambient-light"
          :class="{ active: ambientLight.enabled }"
          :style="{ '--light-color': ambientLight.color }"
        ></div>
      </div>

      <div class="track-info">
        <h2>{{ currentTrack.title }}</h2>
        <div class="artist-album">
          <span class="artist">{{ currentTrack.artist }}</span>
          <span class="divider">·</span>
          <span class="album">{{ currentTrack.album }}</span>
        </div>
      </div>

      <div class="progress-bar">
        <span class="time current">{{ currentTrack.currentTime }}</span>
        <div class="progress-track">
          <div 
            class="progress-fill"
            :style="{ width: `${currentTrack.progress}%` }"
          ></div>
        </div>
        <span class="time total">{{ currentTrack.duration }}</span>
      </div>

      <div class="player-controls">
        <button 
          class="control-btn shuffle"
          :class="{ active: isShuffle }"
        >
          🔀
        </button>
        <button class="control-btn prev">⏮️</button>
        <button 
          class="play-btn"
          @click="togglePlay"
        >
          {{ isPlaying ? '⏸️' : '▶️' }}
        </button>
        <button class="control-btn next">⏭️</button>
        <button 
          class="control-btn repeat"
          :class="{ active: isRepeat }"
        >
          🔁
        </button>
      </div>
    </div>

    <!-- 播放列表 -->
    <div class="playlist-section">
      <h2>播放列表</h2>
      <div class="playlist">
        <div 
          v-for="track in playlist"
          :key="track.id"
          class="track-item"
        >
          <div class="track-info">
            <div class="track-title">{{ track.title }}</div>
            <div class="track-meta">
              {{ track.artist }} · {{ track.album }}
            </div>
          </div>
          <div class="track-duration">{{ track.duration }}</div>
        </div>
      </div>
    </div>

    <!-- 音效控制 -->
    <div class="effects-section">
      <div class="equalizer">
        <h3>均衡器</h3>
        <div class="eq-controls">
          <div class="eq-item">
            <span class="eq-label">低音</span>
            <input
              v-model="equalizer.bass"
              type="range"
              min="0"
              max="100"
              class="eq-slider"
              @input="updateEqualizer('bass', $event.target.value)"
            >
          </div>
          <div class="eq-item">
            <span class="eq-label">中音</span>
            <input
              v-model="equalizer.mid"
              type="range"
              min="0"
              max="100"
              class="eq-slider"
              @input="updateEqualizer('mid', $event.target.value)"
            >
          </div>
          <div class="eq-item">
            <span class="eq-label">高音</span>
            <input
              v-model="equalizer.treble"
              type="range"
              min="0"
              max="100"
              class="eq-slider"
              @input="updateEqualizer('treble', $event.target.value)"
            >
          </div>
        </div>
      </div>

      <div class="ambient">
        <h3>氛围灯光</h3>
        <div class="ambient-controls">
          <button 
            class="light-btn"
            :class="{ active: ambientLight.enabled }"
            @click="toggleLight"
          >
            {{ ambientLight.enabled ? '关闭' : '开启' }}
          </button>
          <input
            v-model="ambientLight.color"
            type="color"
            class="color-picker"
            @input="updateLightColor($event.target.value)"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.room-page {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  padding: 2rem;
}

/* 主播放器样式 */
.player-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.album-art {
  width: 300px;
  height: 300px;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.ambient-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, var(--light-color) 0%, transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.ambient-light.active {
  opacity: 0.3;
}

.track-info {
  text-align: center;
}

.track-info h2 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.artist-album {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.divider {
  margin: 0 0.5rem;
}

.progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.time {
  color: var(--text-gray);
  font-size: 0.9rem;
  min-width: 45px;
}

.progress-track {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.1s linear;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.control-btn,
.play-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.control-btn.active {
  color: var(--primary-color);
}

/* 播放列表样式 */
.playlist-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
}

.playlist-section h2 {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--text-gray);
}

.playlist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.track-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--bg-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.track-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.track-title {
  margin-bottom: 0.3rem;
}

.track-meta {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.track-duration {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 音效控制样式 */
.effects-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.equalizer,
.ambient {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
}

.equalizer h3,
.ambient h3 {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--text-gray);
}

.eq-controls {
  display: flex;
  gap: 2rem;
}

.eq-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eq-label {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.eq-slider {
  width: 100%;
  height: 150px;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

.ambient-controls {
  display: flex;
  gap: 1rem;
}

.light-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.light-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.color-picker {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .room-page {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .album-art {
    width: 200px;
    height: 200px;
  }

  .effects-section {
    grid-template-columns: 1fr;
  }

  .eq-controls {
    flex-direction: column;
    gap: 1rem;
  }

  .eq-slider {
    height: 4px;
    writing-mode: initial;
    -webkit-appearance: none;
  }
}
</style>